import React, { useMemo, useCallback } from 'react';

import { Empty } from 'antd';
import { DesignerContext } from '../DesignerHooks';

import { NodeForm } from '../DesignerSettings//NodeForm';

import cls from 'classnames';
import './styles.less';

// const labelStyle: React.CSSProperties = { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' };

export const Data: React.FC = () => {
  const clsName = 'design-collapse-box';

  const context = React.useContext(DesignerContext);

  let nodeData = useMemo(() => {
    if (context?.targetNode?.node) {
      return context?.targetNode?.node;
    } else {
      return null;
    }
  }, [context?.targetNode?.node]);

  const onFormChange = useCallback(
    (targetValue, allValue) => {
      context?.updateNodeData(allValue);
    },
    [context?.targetNode?.node],
  );

  return (
    <>
      {nodeData?.data ? (
        <div className={cls(clsName)}>
          {((FormData) => (
            <NodeForm nodeData={FormData} onFormChange={onFormChange} />
          ))(nodeData)}
        </div>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
      )}
    </>
  );
};
